<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单机游戏 - 连连看游戏系统</title>
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <link rel="stylesheet" th:href="@{/static/css/game.css}">
</head>
<body>
    <div class="page-header">
        <h1>🎮 连连看游戏</h1>
        <p class="subtitle" th:text="'难度：' + ${mode == 'easy' ? '简单' : mode == 'normal' ? '普通' : '困难'}">难度：普通</p>
    </div>

    <div class="container">
        <div class="game-container">
            <!-- 游戏主区域 -->
            <div class="game-main">
                <div class="game-board-wrapper">
                    <div id="gameBoard" class="game-board"></div>
                    <div class="game-controls">
                        <button class="control-btn btn-pause" onclick="pauseGame()">⏸️ 暂停</button>
                        <button class="control-btn btn-restart" onclick="restartGame()">🔄 重新开始</button>
                        <button class="control-btn btn-quit" onclick="quitGame()">🚪 退出游戏</button>
                    </div>
                </div>
            </div>

            <!-- 游戏侧边栏 -->
            <div class="game-sidebar">
                <!-- 游戏信息 -->
                <div class="game-info-card">
                    <div class="game-info-title">⏱️ 游戏信息</div>
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-value timer-value" id="timeDisplay">30</div>
                            <div class="info-label" id="timeLabel">剩余时间</div>
                        </div>
                        <div class="info-item">
                            <div class="info-value" id="scoreDisplay">0</div>
                            <div class="info-label">得分</div>
                        </div>
                        <div class="info-item">
                            <div class="info-value" id="comboDisplay">0</div>
                            <div class="info-label">连击</div>
                        </div>
                        <div class="info-item">
                            <div class="info-value" id="pairsDisplay">0/0</div>
                            <div class="info-label">完成进度</div>
                        </div>
                    </div>
                </div>

                <!-- 道具栏 -->
                <div class="game-info-card">
                    <div class="game-info-title">🎁 道具</div>
                    <div class="tools-grid">
                        <button class="tool-btn" onclick="useTool('hint')">
                            <span class="tool-icon">🧭</span>
                            <span>提示</span>
                        </button>
                        <button class="tool-btn" onclick="useTool('shuffle')">
                            <span class="tool-icon">🔄</span>
                            <span>重列</span>
                        </button>
                        <button class="tool-btn" onclick="useTool('bomb')">
                            <span class="tool-icon">💣</span>
                            <span>炸弹</span>
                        </button>
                        <button class="tool-btn" onclick="useTool('freeze')">
                            <span class="tool-icon">❄️</span>
                            <span>加时</span>
                        </button>
                    </div>
                </div>

                <!-- 玩家信息 -->
                <div class="game-info-card">
                    <div class="game-info-title">👤 玩家信息</div>
                    <div style="text-align: center;">
                        <img th:src="${user.avatar}" alt="头像" style="width: 80px; height: 80px; border-radius: 50%; margin-bottom: 10px;">
                        <div style="font-weight: bold; margin-bottom: 5px;" th:text="${user.nickname}">玩家昵称</div>
                        <div style="color: #666; font-size: 14px;">总积分: <span th:text="${user.totalScore}">0</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 游戏结果弹窗 -->
    <div id="gameModal" class="game-modal">
        <div class="modal-content">
            <div class="modal-icon" id="modalIcon">🎉</div>
            <div class="modal-title" id="modalTitle">游戏完成！</div>
            <div class="result-stats">
                <div class="result-row">
                    <span class="result-label">得分</span>
                    <span class="result-value" id="finalScore">0</span>
                </div>
                <div class="result-row">
                    <span class="result-label">最大连击</span>
                    <span class="result-value" id="finalCombo">0</span>
                </div>
                <div class="result-row">
                    <span class="result-label">消除对子</span>
                    <span class="result-value" id="finalPairs">0</span>
                </div>
                <div class="result-row">
                    <span class="result-label">用时</span>
                    <span class="result-value" id="finalTime">0秒</span>
                </div>
            </div>
            <div class="modal-buttons">
                <button class="btn btn-primary btn-block" onclick="restartGame()">再玩一局</button>
                <button class="btn btn-secondary btn-block" onclick="backToSelect()">返回选择</button>
            </div>
        </div>
    </div>

    <!-- 连击提示 -->
    <div id="comboToast" class="combo-toast" style="display: none;"></div>

    <footer class="page-footer">
        <p>&copy; 2024 连连看游戏系统. All rights reserved.</p>
        <p>消除相同图案，挑战极限连击！</p>
    </footer>

    <script th:inline="javascript">
        /*<![CDATA[*/
        const GAME_MODE = /*[[${mode}]]*/ 'normal';
        /*]]>*/
    </script>
    <script th:src="@{/static/js/game-engine.js}"></script>
</body>
</html>

